<template>
	<view>
		<view class="body after-navber">
		    <view class="top-bar">
		        <view class="flex-row sort-bar">
		            <view @tap="sortClick" :class="'flex-grow-1 flex-x-center flex-y-center sort-item ' + (sort == 0 ? 'active' : '')" data-sort="0">综合</view>
		            <view @tap="sortClick" :class="'flex-grow-1 flex-x-center flex-y-center sort-item ' + (sort == 1 ? 'active' : '')" data-sort="1">最新</view>
		            <view @tap="sortClick" :class="'flex-grow-1 flex-x-center flex-row sort-item ' + (sort == 2 ? 'active' : '')" data-default_sort_type="0" data-sort="2">
		                <view class="flex-y-center">价格</view>
		                <view class="flex-y-center sort-icon-box">
		                    <view>
		                        <view>
		                            <image class="sort-icon-up" src="/static/images/icon-sort-up-active.png" v-if="sort == 2 && sort_type == 0"></image>
		                            <image class="sort-icon-up" src="/static/images/icon-sort-up.png" v-else></image>
		                        </view>
		                        <view>
		                            <image class="sort-icon-up" src="/static/images/icon-sort-down-active.png" v-if="sort == 2 && sort_type == 1"></image>
		                            <image class="sort-icon-up" src="/static/images/icon-sort-down.png" v-else></image>
		                        </view>
		                    </view>
		                </view>
		            </view>
		            <view @tap="sortClick" :class="'flex-grow-1 flex-x-center flex-y-center sort-item ' + (sort == 3 ? 'active' : '')" data-sort="3">销量</view>
		        </view>
		    </view>
			<view class="liebiao">
				<image  @tap="typechange" src="/static/images/liebiao.png" class="img"></image>
			</view>
		    <view class="goods-list">
		        <view class="no-data-tip" v-if="show_no_data_tip">该类目暂无内容</view>
		        <navigator :class="type==0?'goods-item2 flex-y-center':'goods-item'" openType="navigate" :url="'/pages2/shop/goods-detail/goods-detail?id=' + item.id" v-for="(item, index) in goods_list" :key="item.id">
		            <image :class="type==0?'goods-pic2 flex-grow-0':'goods-pic'" mode="aspectFill" :src="item.pic_url"></image>
		
		            <view class="goods-info flex-grow-1" style="padding: 5rpx 20rpx">
		                <text class="mb-10 text-more-2" style="height: 2.8em; line-height: 1.4;font-size: 9pt;">{{ item.name }}</text>
		                <view class="flex-row" :style="type==0?'margin-top:20rpx':''">
		                    <view class="flex-grow-1" style="color: #ff334b">￥{{ item.price }}</view>
		                    <view class="flex-grow-0 fs-sm" style="color: #999" v-if="__is_sales">已售{{ item.sales }}</view>
		                </view>
		            </view>
		        </navigator>
		    </view>
		    <view :class="'loading-bar ' + (show_loading_bar ? 'active' : '')" style="text-align: center">
		        <image :src="__wxapp_img.system.loading.url" style="width: 160rpx; height: 80rpx"></image>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				cat_id:'16',
			goods_list:[],
			sort:0,
			sort_type:-1,
			__is_sales:1
			}
		},
		methods: {
			typechange:function(){
				var that = this;
				if (that.type == 1) {
				 that.type=0
				 }
				 else{
				that.type = 1	 
				 }
			},
			sortClick: function (t) {
			    var that = this;
			    var e = t.currentTarget.dataset.sort;
			    var i = null == t.currentTarget.dataset.default_sort_type ? -1 : t.currentTarget.dataset.default_sort_type;
			    var o = that.sort_type;
			    if (that.sort == e) {
			        if (-1 == i) {
			            return;
			        }
			
			        if (-1 == that.sort_type) {
			            o = i;
			        } else {
			            if (0 == o) {
			                o = 1;
			            } else {
			                o = 0;
			            }
			        }
			    } else {
			        o = i;
			    }
			
			    that.sort=e
				 that.sort_type=o
			
			},
		}
	}
</script>

<style>
.liebiao{
	background: #fff;
	padding: 10rpx;
	text-align: right;
	position: fixed;
	    top: 106rpx;
	    left: 0;
	    right: 0;
	    width: 100%;
	    overflow: hidden;
	  
	    z-index: 10;
	    border-top: 1rpx solid #e3e3e3;
}
.liebiao .img{
	width: 50rpx;
	height: 50rpx;
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    background: #fff;
    z-index: 10;
    border-top: 1rpx solid #e3e3e3;
}

.cat-list {
    white-space: nowrap;
    border-bottom: 1rpx solid #e3e3e3;
    background: #fff;
}

.cat-list .list-content {
    white-space: nowrap;
    height: 100rpx;
}

.cat-list .cat-item {
    white-space: nowrap;
    display: inline-block;
    padding: 0 40rpx;
    height: 100%;
}

.cat-list .cat-item text {
    white-space: nowrap;
    border-bottom: 5rpx solid transparent;
    height: 100%;
    transform: translateY(1rpx);
}

.cat-list .cat-item.active text {
    color: #ff4544;
    border-bottom-color: #ff4544;
}

.sub-cat-list {
    white-space: nowrap;
    border-bottom: 1rpx solid #e3e3e3;
    background: #fff;
}

.sub-cat-list scroll-view {
    height: 100rpx;
}

.sub-cat-list .list-content {
    white-space: nowrap;
    height: 100rpx;
    padding: 0 20rpx;
}

.sub-cat-list .cat-item {
    display: inline-block;
    height: 60rpx;
    padding: 0 20rpx;
    border: 1rpx solid #ff4544;
    margin: 20rpx;
    color: #ff4544;
    border-radius: 5rpx;
}

.sub-cat-list .cat-item text {
    height: 100%;
}

.sub-cat-list .cat-item.active {
    background: #ff4544;
    color: #fff;
}

.top-bar ~ .goods-list {
    padding-top: 188rpx;
}

.top-bar.height-bar ~ .goods-list {
    padding-top: 206rpx;
}

.goods-item {
    width: 365rpx;
    display: inline-block;
    position: relative;
    margin: 0 5rpx;
    margin-bottom: 10rpx;
    background: #fff;
}

.goods-item .goods-pic {
    width: 100%;
    height: 365rpx;
}
.goods-item2{
	background: #fff;
	
	margin-bottom: 10rpx;
}
.goods-item2 .goods-pic2{
	width:130px;
	height: 130px;
}
.goods-item .goods-info {
    padding: 5rpx 0;
}

.goods-item .goods-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 10rpx;
    display: block;
    text-align: center;
}

.goods-item .goods-price {
    color: #f40;
    display: block;
    text-align: center;
}

.loading-bar {
    visibility: hidden;
}

.loading-bar.active {
    visibility: visible;
}

.sort-bar {
    height: 100rpx;
}

.sort-item.active {
    color: #ff4544;
}

.sort-item .sort-icon-box {
    margin-left: 15rpx;
}

.sort-item .sort-icon-up,
.sort-item .sort-icon-down {
    width: 20rpx;
    height: 12rpx;
    display: block;
}

.sort-item .sort-icon-up {
    margin-bottom: 5rpx;
}
</style>
